---
import type { CollectionEntry } from 'astro:content'
import type { GetStaticPaths } from 'astro'
import MarkdownLayout from '@/layouts/MarkdownLayout.astro'
import { getSortedPosts } from '@/utils/content'
import MarkdownWrapper from '@/components/MarkdownWrapper.astro'
import SectionBlock from '@/components/SectionBlock.astro'
import { PostToc } from '@/components/post/PostToc'
import PostMetaInfo from '@/components/post/PostMetaInfo.astro'
import PostArchiveInfo from '@/components/post/PostArchiveInfo.astro'
import { ReadingProgress } from '@/components/post/ReadingProgress'
import { Outdate } from '@/components/post/Outdate'
import PostNav from '@/components/post/PostNav.astro'
import { Comments } from '@/components/comment'
import { ActionAside } from '@/components/post/ActionAside'
import { PostCopyright } from '@/components/post/PostCopyright'

export const getStaticPaths = (async () => {
  const sortedPosts = await getSortedPosts()

  return sortedPosts.map((post, index) => ({
    params: { slug: post.slug },
    props: {
      current: post,
      prev: index > 0 ? sortedPosts[index - 1] : undefined,
      next: index < sortedPosts.length - 1 ? sortedPosts[index + 1] : undefined,
    },
  }))
}) satisfies GetStaticPaths

interface Props {
  current: CollectionEntry<'posts'>
  prev?: CollectionEntry<'posts'>
  next?: CollectionEntry<'posts'>
}

const { current, prev, next } = Astro.props

const { headings, Content, remarkPluginFrontmatter } = await current.render()

const mdSlug = `/posts/${current.slug}`

const mdDescription = concat(current.data.category || '', current.data.tags.join(', '))

function concat(str1: string, str2: string, sep = ' / ') {
  if (str1 && str2) return str1 + sep + str2
  if (str1) return str1
  if (str2) return str2
  return ''
}

const lastMod = current.data.lastMod || current.data.date
---

<MarkdownLayout
  title={current.data.title}
  description={current.data.summary}
  image={current.data.cover}
  mdTitle={current.data.title}
  mdDescription={mdDescription}
  mdSlug={mdSlug}
>
  <div
    class="max-w-[1100px] mx-auto px-4 md:px-8 py-16 grid lg:grid-cols-[auto_260px] gap-8"
    data-pagefind-body
  >
    <div>
      <header class="space-y-4">
        <h1 class="text-4xl font-bold text-center">
          {current.data.title}
        </h1>
        <PostMetaInfo
          class="justify-center"
          date={current.data.date}
          lastMod={current.data.lastMod}
          words={remarkPluginFrontmatter.words}
          readingMinutes={remarkPluginFrontmatter.readingMinutes}
        />
        <PostArchiveInfo
          class="justify-center"
          category={current.data.category}
          tags={current.data.tags}
        />
        <div>
          <Outdate lastMod={lastMod} client:idle />
        </div>
      </header>
    </div>
    <div class="col-start-1 min-w-0">
      <MarkdownWrapper>
        <Content />
      </MarkdownWrapper>
    </div>
    <div class="hidden lg:block" data-pagefind-ignore>
      <aside class="sticky top-20">
        <SectionBlock title="目录">
          <PostToc headings={headings} client:idle />
          <hr class="my-2 border-primary max-w-[100px]" />
          <ReadingProgress client:idle />
        </SectionBlock>
        <ActionAside client:idle />
      </aside>
    </div>
    <div data-pagefind-ignore>
      <section class="space-y-6">
        <PostCopyright title={current.data.title} slug={mdSlug} lastMod={lastMod} client:visible />
        <PostNav prev={prev} next={next} />
        {current.data.comments && <Comments />}
      </section>
    </div>
  </div>
</MarkdownLayout>
